{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <!-- 引入LayUI的CSS -->
    <link rel="stylesheet" href="{% static 'plugin/layui/css/layui.css' %}">
    <style>
        body {
            background-image: url("/static/images/bg03.jpg");
            background-size: cover;
        }

        .outer {
            width: 420px;
            height: 400px;
            background-color: whitesmoke;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
        }

        .outer .title {
            width: 100%;
            font-size: 30px;
            color: navy;
            text-align: center;
        }
        .layui-form-item{
            margin-bottom: 24px;
        }
    </style>
</head>
<body>
<div class="outer">
    <!-- 标题部分-->
    <div class="title">用 户 登 陆</div>
    <hr style="margin: 40px 0">
    <!-- 登陆的表单 -->
    <form id="loginForm" class="layui-form" lay-filter="loginForm" >
        {% csrf_token %}
        <div class="layui-form-item">
            <label class="layui-form-label" for="loginid"><b>登陆账号：</b></label>
            <div class="layui-input-block">
                <input type="text" id="loginid" name="loginid" class="layui-input" placeholder="登陆账号/手机号码/邮箱" >
                <span class="error_msg" style="color:red; position: absolute"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="loginpwd"><b>登陆密码：</b></label>
            <div class="layui-input-block">
                <input type="password" id="loginpwd" name="loginpwd" class="layui-input" placeholder="登陆密码">
                <span class="error_msg" style="color:red; position: absolute"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="loginid"><b>滑块验证：</b></label>
            <div class="layui-input-block">
                <div id="slider"></div>
                <span class="error_msg" style="color:red; position: absolute"></span>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 30px;">
            <input type="checkbox" id="rememberme" name="rememberme" title="记住我" checked>
        </div>
        <div class="layui-form-item" style="float:right">
            <button type="submit" class="layui-btn">登陆</button>
            <button type="button" class="layui-btn  layui-btn-primary">取消</button>
        </div>
    </form>
</div>
</body>
</html>

<!-- 引入JS -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'plugin/layui/layui.js' %}"></script>
<script>
    // 入口函数
    $(function () {
        // === 页面的初始化 ===
        initPage();
        // === 滑块的初始化 ===
        initSlider();
    });

    //================== 页面初始化的功能实现 ===========
    function initPage() {
        layui.use(['form'], function () {
            let form = layui.form;

        })
    }

    // ============== 滑块初始化的实现 ==================
    function initSlider() {
        layui.config({
            base: '{% static 'plugin/layui/layui_exts/sliderVerify/' %}'
        }).use(['sliderVerify', 'form'], function () {
            let sliderVerify = layui.sliderVerify;
            let form = layui.form;
            let slider = sliderVerify.render({
                elem: '#slider'
            });

            //监听提交
            form.on('submit(loginForm)', function (data) {
                // 取消错误提示
                $('.error_msg').empty();
                if (slider.isOk()) {//用于表单验证是否已经滑动成功
                    // 以及完成滑块
                    $.ajax({
                        url: "{% url 'login_handle' %}",
                        method: 'post',
                        data: $('#loginForm').serialize(),
                        dataType:"json",
                        success: function (res) {
                            // 根据返回的结果判断
                            if(res.code === 0){
                                location.href = "{% url 'main' %}";
                            } else if (res.code === 1){
                                $('#loginid').next().text(res.error);
                                slider.reset();
                            } else if(res.code === 3){
                                $('#loginpwd').next().text(res.error);
                                slider.reset();
                            } else {
                                slider.reset();
                                layui.layer.msg(res.error, {
                                    icon:2,
                                    area:['500px','220x'],
                                    time:-1,
                                    btn: ['关闭']
                                })
                            }
                        }
                    })

                } else {
                    layer.msg("请先通过滑块验证");
                }
                return false;
            });

        })
    }

</script>